// 本文件用于：入口文件
import GlobalMask from '@/page-frame/global-mask';
import MessageAlert from '@/page-frame/message-alert';
import Router from '@/router';
import { RootState } from '@/store';
import versionCheck from '@lycz/version-check';
import { App, ConfigProvider, theme } from 'antd';
// import Color from 'color';
import globalStyle from '@/assets/global.module.less';
import { memo, useEffect, useMemo } from 'react';
import { useSelector } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import styles from './index.module.less';

export default memo(() => {
  /** 要展示内容的区域 */
  const displayArea = useSelector((state: RootState) => state.global.displayArea);
  /** 是否只展示内容区域 */
  const isOnlyMain = useSelector((state: RootState) => state.global.isOnlyMain);
  /** 主题色 */
  const { primaryColor, themeType } = useSelector((state: RootState) => state.global.styleCfg);

  /** 根据要展示的区域和主题等信息，动态返回相应的class */
  const displayStatusClass = useMemo(() => {
    let retClass = '';

    const isShowMenu = !!displayArea && !!displayArea.menu;
    const isShownHeader = !!displayArea && !!displayArea.header;

    // 为了能在下级less文件中能访问到，这里采用非模块化写法
    if (isOnlyMain || !isShowMenu) {
      retClass += ` hiddenMenu`;
    }
    if (isOnlyMain || !isShownHeader) {
      retClass += ` hiddenHeader`;
    }
    if (isOnlyMain || !Object.values(displayArea).some((x) => x)) {
      retClass += ` hiddenAllExtra`;
    }
    if (themeType === 'dark') {
      retClass += ` darkTheme`;
    }

    return retClass;
  }, [displayArea, themeType, isOnlyMain]);

  useEffect(() => {
    /** 用于检测html资源是否有变更 */
    versionCheck({
      serverName: 'react18antd5',
    });
  }, []);

  return (
    // ConfigProvider中，修改antd的全局配置
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: primaryColor,
        },
        algorithm: themeType === 'dark' ? [theme.darkAlgorithm] : [],
        components: {
          Menu: {
            // itemSelectedBg: Color(primaryColor).lighten(0.7).hex(),
          },
        },
      }}
    >
      {/* App组件也可以修改antd的一些全局配置，但只影响通过 App.useApp() 引用的组件 */}
      <App message={{ maxCount: 3 }}>
        <BrowserRouter basename={import.meta.env.BASE_URL}>
          <div className={displayStatusClass}>
            {/* 内容区域 */}
            <div className={styles.globalContent}>
              {/* 功能区域 */}
              <div className={styles.mainArea}>
                <div className={`${styles.renderArea} ${globalStyle.thinScroll}`}>
                  {/* 全局遮罩组件 */}
                  <GlobalMask />

                  {/* 具体功能界面 */}
                  <Router />
                </div>
              </div>

              {/* 全局作用类型的组件，一般是隐藏状态，由redux进行激活 */}
              <div>
                {/* 消息提示组件 */}
                <MessageAlert />
              </div>
            </div>
          </div>
        </BrowserRouter>
      </App>
    </ConfigProvider>
  );
});
